import React, { useDeferredValue, useState } from "react"
import names from "@/data/list/names"

const UseDeferredValue = function () {
  const [nameList, setNameList] = useState(names)
  const tempNames = useDeferredValue(nameList)
  const onInput = (e) => {
    const list = names.filter((item) => item.includes(e.target.value))
    setNameList(list) // 这里还是只需要给nameList set值就行了, 而tempNames就是会自动找到你传入的参数nameList而在ui上缓慢更新罢了
  }
  return (
    <div>
      <span>查询列表：</span>
      <input onInput={onInput} />
      <h4>用户列表</h4>
      <ul>
        {tempNames.map((item, i) => {
          return <li key={i}>{item}</li>
        })}
      </ul>
    </div>
  )
}

export default React.memo(UseDeferredValue)
